<template>
  <div class="carousel-container" @mouseenter="pauseCarousel" @mouseleave="resumeCarousel">
    <div class="carousel-wrapper" ref="carouselWrapper">
      <div class="carousel-track" :style="trackStyle">
        <div
          v-for="(item, index) in displayItems"
          :key="`${item.id}-${index}`"
          class="carousel-item"
          :class="{ highlight: item.highlight }"
        >
          <div class="item-content">
            <span v-if="item.icon" class="icon">{{ item.icon }}</span>
            {{ item.content }}
          </div>
        </div>
      </div>
    </div>

    <!-- 控制按钮 -->
    <div class="carousel-controls">
      <button @click="pauseCarousel" class="control-btn">⏸️</button>
      <button @click="resumeCarousel" class="control-btn">▶️</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from 'vue'

const items = ref([
  { id: 1, content: '🚀 欢迎使用我们的系统', icon: '🚀', highlight: true },
  { id: 2, content: '✨ 新功能已上线，快来体验', icon: '✨', highlight: false },
  { id: 3, content: '🔧 系统维护通知', icon: '🔧', highlight: false },
  { id: 4, content: '🎉 节日活动开始了', icon: '🎉', highlight: true },
  { id: 5, content: '❤️ 感谢您的支持', icon: '❤️', highlight: false },
])

const displayItems = computed(() => {
  return [...items.value, ...items.value]
})

const currentPosition = ref(0)
const isPaused = ref(false)
const animationFrameId: any = ref(null)
const carouselWrapper: any = ref(null)

const trackStyle = computed(() => {
  return {
    transform: `translateX(${currentPosition.value}px)`,
  }
})

// 走马灯动画
const animate = () => {
  if (isPaused.value) return

  currentPosition.value -= 1

  // 重置位置实现无限滚动
  const wrapperWidth = carouselWrapper.value?.offsetWidth || 0
  const trackWidth = wrapperWidth * (displayItems.value.length / 2)

  if (Math.abs(currentPosition.value) >= trackWidth) {
    currentPosition.value = 0
  }

  animationFrameId.value = requestAnimationFrame(animate)
}

const pauseCarousel = () => {
  isPaused.value = true
  if (animationFrameId.value) {
    cancelAnimationFrame(animationFrameId.value)
  }
}

const resumeCarousel = () => {
  if (!isPaused.value) return
  isPaused.value = false
  animate()
}

// 动态添加新内容
const addNewItem = (content: any, icon = '📢') => {
  const newItem = {
    id: Date.now(),
    content,
    icon,
    highlight: true,
  }
  items.value.push(newItem)

  // 3秒后取消高亮
  setTimeout(() => {
    const item = items.value.find((item) => item.id === newItem.id)
    if (item) {
      item.highlight = false
    }
  }, 3000)
}

onMounted(() => {
  animate()

  // 示例：5秒后添加新公告
  setTimeout(() => {
    addNewItem('🔥 热腾腾的新公告来了！', '🔥')
  }, 5000)
})

onUnmounted(() => {
  if (animationFrameId.value) {
    cancelAnimationFrame(animationFrameId.value)
  }
})

// 暴露方法给父组件
defineExpose({
  pauseCarousel,
  resumeCarousel,
  addNewItem,
})
</script>

<style scoped>
.carousel-container {
  width: 100%;
  height: 60px;
  overflow: hidden;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  position: relative;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.carousel-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.carousel-track {
  display: flex;
  height: 100%;
  white-space: nowrap;
  will-change: transform;
}

.carousel-item {
  flex-shrink: 0;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 50px;
  transition: all 0.3s ease;
}

.carousel-item.highlight .item-content {
  color: #ffeb3b;
  font-weight: bold;
  text-shadow: 0 0 10px rgba(255, 235, 59, 0.5);
}

.item-content {
  color: white;
  font-size: 16px;
  font-weight: 500;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  gap: 8px;
}

.icon {
  font-size: 18px;
}

.carousel-controls {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  gap: 8px;
}

.control-btn {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  border-radius: 4px;
  padding: 4px 8px;
  cursor: pointer;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.control-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .carousel-container {
    height: 50px;
    border-radius: 8px;
  }

  .carousel-item {
    padding: 0 25px;
  }

  .item-content {
    font-size: 14px;
  }

  .carousel-controls {
    right: 10px;
  }

  .control-btn {
    padding: 3px 6px;
    font-size: 12px;
  }
}
</style>
